<template>
  <div class="user-login">
    <div class="user-login-bg" :style="{'background-image':`url(${backgroundImage})`}"></div>
    <div class="content-wrapper">
      <h2 class="slogan">
        欢迎使用 <br /> UMA 后台管理系统
      </h2>
      <div class="form-container">
        <h4 class="form-title">登录</h4>
        <el-form ref="form" :model="user" label-width="0" size="medium">
          <div class="form-items">
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="username" :rules="[ { required: true, message: '会员名不能为空'}]">
                  <div class="form-line">
                    <i class="element-icons el-iconlogin input-icon"></i>
                    <el-input placeholder="会员名" v-model="user.username" @keyup.enter.native="submit"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="password" :rules="[ { required: true, message: '密码不能为空'}]">
                  <div class="form-line">
                    <i class="element-icons el-iconpassword input-icon"></i>
                    <el-input type="password" placeholder="密码" v-model="user.password" @keyup.enter.native="submit"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="captcha" class="captcha-form" :rules="[ { required: true, message: '验证码不能为空'}]">
                  <div class="form-line">
                    <i class="element-icons el-iconvalidate-code input-icon"></i>
                    <el-input type="text" placeholder="验证码" v-model="user.captcha" @keyup.enter.native="submit"></el-input>
                    <el-tooltip content="点击切换验证码" placement="left">
                      <div style="width:85px;height:30px;display:inline-block;">
                        <img :src="captchaImg" @click="getCaptcha" width="85" height="30" alt="验证码">
                      </div>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class=form-item>
              <el-col>
                <el-form-item>
                  <el-checkbox class="checkbox" v-model="isRemember">记住账号</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-button type="primary" class="submit-btn" size="small" @click="submit">
                登 录
              </el-button>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const backgroundImage = 'https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png';
import Store from 'store'
import Cookies from 'js-cookie'
export default {
  name: 'login',
  data() {
    return {
      backgroundImage: backgroundImage,
      user: {
        username: '',
        password: '',
        captcha: '',
      },
      isRemember: false,
      captchaImg: ''
    };
  },
  created() {
    this.getCaptcha()
    if(Store.get('rememberUser')){
      this.isRemember = true
      this.user.username = Store.get('rememberUser')
    } else {
      this.isRemember = false
      this.user.username = ''
    }
  },
  methods: {
    getCaptcha() {
      this.captchaImg = this.$api.getCaptcha()
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$api.login(this.user).then(res => {
            if(res.success){
              const setting = {
                expires: 1
              }
              Store.set('x-user', res.data.user)
              Cookies.set('x-token', res.data.token, setting)
              if(this.isRemember){
                Store.set('rememberUser', this.user.username)
              }
              this.$message.success('登录成功')
              this.$router.push('/advert/list')
            } else {
              this.getCaptcha()
            }
          })
        }
      });
    },
  },
};
</script>

<style lang="less">
@import './login.less';
</style>